<template>
    <!-- 导航区 -->
    <div class="news-container">
        <div class="news-list">
            <ul>
                <li v-for="news in newsList" :key="news.id">
                   <!-- 添加按钮使得也能查看新闻详情 -->
                    <button @click="viewNewsDetails(news)">查看详情</button>
                    <!-- 第一种参数传递：query参数传递，传的参数都放在了路由对象中 -->
                     <!-- 方式一 难看-->
                      <!-- <router-link :to="`/News/details?id=${item.id}&title=${item.title}&content=${item.content}`">{{item.title}}</router-link> -->
                     <!-- 方式二 -->
                   <router-link :to="{
                    path:'/News/details',
                    query:{
                        id:news.id,
                        title:news.title,
                        content:news.content
                        }
                    }"
                    active-class="active"
                >
                    {{news.title}}
                </router-link>
                <!-- 第二种参数传递：params参数传递（少用），传的参数都放在了路由对象中 -->
                 <!-- 方式一：难看 -->
                  <!-- <router-link :to="`/News/details/${news.id}/${news.title}/${news.content}`" active-class="active">{{news.title}}</router-link> -->
                <!-- 方式二：难看、难用 -->
                 <!-- <router-link :to="{
                    name:'xiangqing',//必须写名称，否则出错
                    params:{
                        id:news.id,
                        title:news.title,
                        content:news.content
                        }
                    }"
                    active-class="active"
                >
                    {{news.title}}
                </router-link> -->
                </li>
            </ul>
        </div>
        <!-- 展示区 -->
        <div class="news-details">
            <router-view></router-view>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const newsList = [
    {id:'news01',title:'如何一天之内学会Javaweb',content:'看itheima'},
    {id:'news02',title:'如何一天之内学会Vue3',content:'看itheima'},
    {id:'news03',title:'如何一天之内学会React',content:'看itheima'},
    {id:'news04',title:'如何一天之内学会Node',content:'看itheima'},
]
const router=useRouter()
//查看详情实现跳转,news为参数,v-for循环中的news需要传过来
function viewNewsDetails(news:any){ 
    //to标签里可以放的字符串+对象，push里也可以。原理都是路由跳转
    router.push({
                    path:'/News/details',
                    query:{
                        id:news.id,
                        title:news.title,
                        content:news.content
                        }
                    });
}
</script>

<style scoped>
.news-container {
    display: flex;
    min-height: 400px;
}

.news-list {
    flex: 1;
    border-right: 1px solid #ddd;
    padding: 20px;
}

.news-list ul {
    list-style: none;
    padding: 0;
}

.news-list li {
    margin-bottom: 10px;
}

.news-list a {
    text-decoration: none;
    color: #333;
    padding: 10px;
    display: block;
    border-radius: 4px;
    transition: all 0.3s;
    font-weight: bold; /* 添加粗体字体 */
}

.news-list a:hover {
    background-color: #f0f0f0; /* 悬停时的背景色 */
}

.news-list a.active {
    background-color: #42b983; /* 激活时的背景色 */
    color: white; /* 激活时的字体颜色 */
}

.news-details {
    flex: 2;
    padding: 20px;
}
</style>